import { Component, OnInit } from '@angular/core';


declare var  $;
declare var  echarts;
@Component({
  selector: 'app-env-survey',
  templateUrl: './env-survey.component.html'
})
export class EnvSurveyComponent implements OnInit {
  userCode;setTimer;baseUrl;
  constructor() { }

  ngOnInit() {
    this.baseUrl = location.protocol + "//" + location.host + "/";
    this.checkCookie();
  }
  changeHeight(){
    $('body').height($(".user_content").height()+20);
  }
    checkCookie(){
      if(!localStorage.hasOwnProperty('userCode')) {
        $('#myModal').modal({
          show:true,
          backdrop:true
        })
      }else{
        this.userCode = localStorage.getItem("userCode");
        $("#newName").val(this.userCode);
        $(".user_echart_body").html("加载中...").css({"text-align":"center","margin-top":"5rem","font-size":"2rem","font-family":"微软雅黑","font-weight":"200"});
        this.realTime();
      }
    }
    setName(){
      $("#time").html("");
      $("#factorList").html("");
      $('.user_echart_body').html("");
      if ($("#name").val()=="") {
        alert("不能为空");
        $(".user_echart_body").html("暂无数据").css({"text-align":"center","margin-top":"5rem","font-size":"2rem","font-family":"微软雅黑","font-weight":"200"});
      }else{
        this.userCode = $("#name").val();
        localStorage.setItem("userCode",this.userCode);
        $("#newName").val(this.userCode);
        $(".user_echart_body").html("加载中...").css({"text-align":"center","margin-top":"5rem","font-size":"2rem","font-family":"微软雅黑","font-weight":"200"});
        this.realTime();
      }

    }
    reviseName(){
      $("#name").val(localStorage.getItem("userCode"));
      $('#myModal').modal({
        show:true,
        backdrop:false
      });
    }
    //echarts图表
    realTime(){
      let factorObj = '';
      $.ajax({
        type : "get",
        async : true,
        url : this.baseUrl+"api/noAuthen/findDataListBySnCode?format=json&snCode="+this.userCode,
        success : function(result) {
          if (result.data.timeList != null &&result.code =='1111' ) {
            console.log("数据加载成功");
            $(".user_echart_body").html("")
            $("#time").html(result.data.timeList[result.data.timeList.length-1])
            $.each(result.data.dataList, function(i,list) {
              factorObj += '<li class="user_head_content_li"><div><div class="user_head_content_li_first">'+list[list.length-1]+'</div><div>'+result.data.factorList[i]+'</div></div></li>';
            });
            $("#factorList").append(factorObj);
            $.each(result.data.factorList, function(i,list){
              let chartDiv = '<div class="echart_all col-xs-12 col-sm-12 col-md-12 col-lg-6" id="chart'+i+'"></div>';
              $('.user_echart_body').append(chartDiv);
              let myChart = echarts.init(document.getElementById('chart'+i));
              let option = {
                title:{
                  text: '最近历史数据('+list+')',
                },
                tooltip: {
                  trigger: 'axis',
                },
                legend: {
                  show:true,
                  data:[list]
                },
                toolbox: {
                  show: true,
                  feature: {
                    saveAsImage: {
                      name:list+"图表"+result.data.timeList[result.data.timeList.length-1]
                    }
                  }
                },
                xAxis:  {
                  type : 'category',
                  axisLabel:{
                    interval:12
                  },
                  data : result.data.timeList
                },
                yAxis : [
                  {
                    type : 'value',
                    name : '指数',
                    axisLabel : {
                      formatter: '{value}'
                    }
                  },
                ],
                series : {
                  name:list,
                  type:'line',
                  symbol:'emptycircle',
                  smooth:true,
                  data:result.data.dataList[i]
                }
              };
              myChart.setOption(option);    //载入图表
            });
            this.changeHeight();
            this.setTimer = setInterval(this.updateData.bind(this),30000);
          }else {
            $(".user_echart_body").html("暂无数据").css({"text-align":"center","margin-top":"5rem","font-size":"2rem","font-family":"微软雅黑","font-weight":"200"});
            clearInterval(this.setTimer);
          }
        }.bind(this),
        error : function(errorMsg) {
          $(".user_echart_body").html("暂无数据").css({"text-align":"center","margin-top":"5rem"});
          clearInterval(this.setTimer)
        }
      })
    };

    print(){
      window.print();
    }
    updateData(){
      $.ajax({
        type : "get",
        async : true,
        url : this.baseUrl+"api/noAuthen/findDataListBySnCode?format=json&snCode="+this.userCode,
        success : function(data) {
            console.log(data);
          if (data.data.timeList != null &&data.code =='1111' ) {
            $("#time").html(data.data.timeList[data.data.timeList.length-1])
            console.log(data.data.timeList[data.data.timeList.length-1])
            $.each(data.data.dataList, function(i,list) {
              $(".user_head_content_li_first").eq(i).html(list[list.length-1])
            })
            $.each(data.data.factorList, function(i,list){
              let myChart2 = echarts.getInstanceByDom(document.getElementById('chart'+i));
              myChart2.setOption({
                xAxis:  {
                  data : data.data.timeList
                },
                series:{
                  type:'line',
                  smooth:true,
                  data : data.data.dataList[i]
                }
              });
            });
          }else {
          }
        },
        error : function(errorMsg) {
        }
      });
    }
}
